<template>
    <!-- 父盒子 -->
    <div class="father_box" @click="onclick">
        <!-- 生成的标签 -->
        <div v-for="(item, index) in TagsAll" :key="index" class="spanbox">
            <span class="tagspan">{{ item }}</span>
            <i class="span_close" @click="removeTag(index, item)"></i>
        </div>
        <!-- 输入框 -->
        <input :placeholder="TagsAll.length!=0?'':'请输入姓名/电话/邮箱 按<空格>生成搜索标签'" @blur="addTags" v-model="currentval" @keydown.space.prevent="addTags" @keyup.enter="addTags" @keyup.delete="deleteTags"
            :style="inputStyle" class="inputTag" ref="inputTag" type="text"/>
        <!-- <i v-show="TagsAll.length!=0" class="span_close" style="" @click="removeTags()"></i> -->
    </div>
</template>
   
<script>
export default {
    name: "inputTags",
    props:["Refresh"],
    data() {
        return {
            //输入框
            currentval: "",
            //tag
            TagsAll: [],
            //输入框宽度
            inputLength: "",
            //计算删除位置
            n: 0,
        };
    },
    watch: {
        TagsAll:{
            handler(newValue, oldValue) {
                console.log("监听search");
                let string=this.TagsAll.join()
                this.$emit("onChange", string);

            },
            deep:true
        },
        //监听输入的值越多，输入框越长
        currentval(val) {
            // 实时改变input输入框宽度，防止输入内容超出input默认宽度显示不全
            // this.inputLength = this.$refs.inputTag.value.length * 12 + 50;
        },
        // parentArr() {
        //   this.TagsAll = this.parentArr.length ? this.parentArr : [];
        // },
        Refresh(){
            // console.log("组件重置");
            this.TagsAll=[]
        }
    },
    computed: {
        
        //计算属性：计算出动态输入框宽度
        inputStyle() {
            let style = {};
            style.width = `${this.inputLength}px`;
            return style;
        },
        //将生成的数据拼接成字符串，因为我们公司后台需要这种格式的数据。
        // finall() {
        //   return this.TagsAll.join(",");
        // },
    },
    methods: {
        //点击叉叉删除tag
        removeTag(index, item) {
            console.log(item);
            this.TagsAll.splice(index, 1);
        },

        //回车增加tag
        addTags() {
            //新增函数中可以加一些你所需要的校验规则。比如只能是数子，或者不能输入‘，’等
            if (this.currentval) {
                //限制输入长度
                if (this.currentval.length > 100) {
                    // alert('单标签长度不能超过10个字符！')
                } else {
                    //添加tag
                    this.TagsAll.push(this.currentval);
                    //清空输入框
                    this.currentval = "";
                }
            }
        },
        removeTags(){
            this.TagsAll=[]
            this.currentval = "";
        },
        //键盘删除键删除tag
        deleteTags() {
            //逻辑：当删除到最后一个字符的时候，删除后currentval为空，所以继续执行，n++。这时候n=1.然后判断n是否等于2，不等于不执行。
            //这里是保证当你删除最后一个字符的时候不会执行删除tag的方法，当我们删完了字符后再按一次删除的时候，n就等于2了。就开始删除tag。
            //当有多个tag时，我们连续删除，就会出现，因为currentval为空，所以一直执行n++，导致n不等于2了，所以没法删除后面的tag。
            //所以增加判断，当n大于2的时候我们看tag的长度有没有，有那就继续删除，没有就归0，从来。
            if (this.currentval == "") {
                this.n++;
                if (this.n == 2) {
                    this.TagsAll.pop();
                }
                if (this.n > 2) {
                    if (this.TagsAll.length) {
                        this.TagsAll.pop();
                    } else {
                        this.n = 0;
                    }
                }
            } else {
                this.n = 0;
            }
        },
        //点击父盒子输入框获取焦点
        onclick() {
            this.$nextTick(() => {
                this.$refs.inputTag.focus();
            });
        },
    },
};
</script>
   
<style scoped lang="less">
/* 外层div */
.father_box {
    min-width: 350px;
    max-width:600px;
    min-height: 30px;
    box-sizing: border-box;
    background-color: white;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 14px;
    text-align: left;
    /* padding-left: 5px; */
    padding: 1px 11px;
    word-wrap: break-word;
    overflow: hidden;
    display: flex;
    align-items: center;
    &:hover{
        border: 1px solid #2f6cbc;
    }
    &:active{
        border: 1px solid #2f6cbc;

    }
    display: flex;
    flex-wrap: wrap;
}

/* 标签 */
.spanbox {
    display: flex;
    font-size: 14px;
    margin: 3px 4px 3px 0;
    background-color: #ecf5ff;
    border: 1px solid #e8eaec;
    border-radius: 3px;
    // box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

/* 标签文字 */
.tagspan {
    height: 20px;
    line-height: 18px;
    max-width: 99%;
    position: relative;
    display: flex;
    padding-left: 8px;
    color: #2f6cbc;
    font-size: 12px;
    opacity: 1;
    vertical-align: middle;
    overflow: hidden;
    transition: 0.25s linear;
}

/* tag的叉叉 */
.span_close {
    padding: 0 6px 0 4px;
    opacity: 1;
    -webkit-filter: none;
    filter: none;
    color: #2f6cbc;
    /* font-weight: 600; */
    cursor: pointer;
}

/* 鼠标经过叉叉 */
.span_close:hover {
    background-color: #2f6cbc;
    border-radius: 50%;
    color: #fff;
}

.span_close:after {
    content: "\00D7";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* line-height: 27px; */
    transition: 0.3s, color 0s;
}

/* input */
.inputTag {
    font-size: 14px;
    border: none;
    box-shadow: none;
    outline: none;
    background-color: transparent;
    padding: 0;
    width: auto;
    min-width: 350px;
    // max-width: 600px;
    vertical-align: top;
    min-height: 30px;
    color: #696b6f;
    font-weight: 500;
    line-height: 28px;
}

/* 输入框提示文字大小 */
input:placeholder-shown {
    font-size: 14px;
    color: #bfcbd9;
}
input::placeholder {
    font-size: 14px;
    color: #9aa0a6;
}
</style>
